import { VIEW_PADDING_TOP } from "@/constants";
import { defineComponent } from "vue";
import { computed } from "vue";
import { useRoute, useRouter } from "vue-router";

const AboutView = defineComponent({
  setup() {
    const router = useRouter();
    const route = useRoute();

    const search = computed({
      get() {
        return route.query.search ?? "";
      },
      set(search) {
        router.replace({ query: { search } });
      },
    });

    return () => (
      <div style={{ paddingTop: VIEW_PADDING_TOP }}>
        <h2>AboutView</h2>
        <label>
          Search: <input v-model={search.value} maxlength="20" />
        </label>
      </div>
    );
  },
});

export default AboutView;
